<template>
  <div class="publicpageview">
    <div class="publicformview">
      <el-form :inline="true" :model="listQuery" size="mini" ref="searchForm">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="区房屋管理单位：" prop="districtId">
              <CompanySelect v-model="listQuery.districtId" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="管理部(分中心)：" prop="houseAdminId">
              <DeptBrowser v-model="listQuery.houseAdminId" :queryDistrictId="listQuery.districtId" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="应急抢险时间：" prop="emergencyTime">
              <el-date-picker v-model="listQuery.emergencyTime" type="date" placeholder="年/月/日" format="yyyy-MM-dd"
                value-format="yyyy-MM-dd" style="width: 100%">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <div>
              <el-button size="mini" type="primary" @click="handleSearch">查询</el-button>
              <el-button size="mini" @click="resetForm('searchForm')">重置</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <div class="publitableview">
      <el-button type="success" size="mini" @click="handleExport">导出</el-button>

      <!-- 统计表格 -->
      <div class="statistics-container">
        <div class="statistics-header">
          <h3 class="statistics-title">应急抢修统计表</h3>
          <div class="statistics-info">
            <span class="unit-info">项目单位：{{ userDname+userHouseAdminName }}</span>
            <span class="time-info">{{ currentTime }}</span>
          </div>
        </div>

        <el-table :data="statisticsData" border size="mini" class="statistics-table" :key="itemKey">
          <el-table-column align="center" width="100" fixed="left">
            <template slot="header">
              <div>项目</div>
            </template>
            <template slot-scope="scope">
              <span>{{ scope.row.years }}</span>
            </template>
          </el-table-column>

          <el-table-column align="center" width="80">
            <template slot="header">
              <div class="header-row2">合计</div>
              <div class="header-row3">处</div>
            </template>
            <template slot-scope="scope">
              <span>{{ allNumber(scope.row) }}</span>
            </template>
          </el-table-column>

          <el-table-column align="center" label="其   中" header-align="center">
            <el-table-column align="center" width="110">
              <template slot="header">
                <div class="header-row2">房屋结构加固</div>
                <div class="header-row3">处{{num1}}</div>
              </template>
              <template slot-scope="scope">
                <span>{{ scope.row.count1 }}</span>
              </template>
            </el-table-column>

            <el-table-column align="center" width="110">
              <template slot="header">
                <div class="header-row2">屋面防水处理</div>
                <div class="header-row3">处{{num2}}</div>
              </template>
              <template slot-scope="scope">
                <span>{{ scope.row.count2 }}</span>
              </template>
            </el-table-column>

            <el-table-column align="center" width="110">
              <template slot="header">
                <div class="header-row2">墙体裂缝修复</div>
                <div class="header-row3">处{{num3}}</div>
              </template>
              <template slot-scope="scope">
                <span>{{ scope.row.count3 }}</span>
              </template>
            </el-table-column>

            <el-table-column align="center" width="110">
              <template slot="header">
                <div class="header-row2">地基沉降处理</div>
                <div class="header-row3">处{{num4}}</div>
              </template>
              <template slot-scope="scope">
                <span>{{ scope.row.count4 }}</span>
              </template>
            </el-table-column>

            <el-table-column align="center" width="110">
              <template slot="header">
                <div class="header-row2">安全围栏设置</div>
                <div class="header-row3">处{{num5}}</div>
              </template>
              <template slot-scope="scope">
                <span>{{ scope.row.count5 }}</span>
              </template>
            </el-table-column>

            <el-table-column align="center" width="110">
              <template slot="header">
                <div class="header-row2">临时支撑搭建</div>
                <div class="header-row3">处{{num6}}</div>
              </template>
              <template slot-scope="scope">
                <span>{{ scope.row.count6 }}</span>
              </template>
            </el-table-column>

            <el-table-column align="center" width="110">
              <template slot="header">
                <div class="header-row2">其他</div>
                <div class="header-row3">处{{num7}}</div>
              </template>
              <template slot-scope="scope">
                <span>{{ scope.row.count7 }}</span>
              </template>
            </el-table-column>
          </el-table-column>

          <el-table-column align="center" min-width="100">
            <template slot="header">
              <div>备注</div>
            </template>
            <template slot-scope="scope">
              <span>{{ scope.row.note }}</span>
            </template>
          </el-table-column>
        </el-table>


      </div>

      <div class="publicpaginationview">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="listQuery.page" background :page-sizes="[10, 20, 50, 100]" :page-size="listQuery.limit"
          layout="total, sizes, prev, pager, next, jumper" :total="total" small>
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import { statisticsRescueInfo } from '@/api/safe/yingjiqiangxian'
import CompanySelect from "@/components/commonSelect/companySelect.vue"
import DeptBrowser from "@/components/SysBrowser/DeptBrowser.vue"
import { convertObjectIntegersToStrings } from '@/utils/dataUtils'
import * as XLSX from 'xlsx'
export default {
  name: 'YingjiQiangxianTongji',
  components: { CompanySelect, DeptBrowser },

  data() {
    return {
      listQuery: {
        page: 1,
        limit: 10,
        districtManagementUnit: "",
        managementCenter: "",
        emergencyTime: "",
        districtId: '',
        houseAdminId: ''
      },
      total: 3,
      currentUnit: "河东区房产服务中心",
      currentTime: "",
      statisticsData: [
      ],
      listLoading: false,
      allChuNumber: '',
      num1: '',
      num2: '',
      num3: '',
      num4: '',
      num5: '',
      num6: '',
      num7: '',
      itemKey: '',
      allNumberChu: '',
      userDname: '',
      userHouseAdminName: ''
    };
  },

  mounted() {

    this.currentTime = dayjs().format('YYYY-MM');
    this.userDname = localStorage.getItem('userDname') != 'null' ? localStorage.getItem('userDname') : ''
    this.userHouseAdminName = localStorage.getItem('userHouseAdminName') != 'null' ? localStorage.getItem('userHouseAdminName') : ''
    this.getList();
  },

  methods: {
    allNumber(row) {
      return Number(row.count1) + Number(row.count2) + Number(row.count3) + Number(row.count4) + Number(row.count5) + Number(row.count6) + Number(row.count7)
    },
    // 分页大小改变
    handleSizeChange(val) {
      this.listQuery.page = 1;
      this.listQuery.limit = val;
      this.getList();
    },

    // 当前页改变
    handleCurrentChange(val) {
      this.listQuery.page = val;
      this.getList();
    },

    // 获取列表数据
    getList() {
      this.listLoading = true;

      // 构建请求参数，过滤空值
      const params = {};
      Object.keys(this.listQuery).forEach(key => {
        if (this.listQuery[key] !== '') {
          params[key] = this.listQuery[key];
        }
      });

      // 调用应急抢险分页接口
      statisticsRescueInfo(params)
        .then(response => {
          this.listLoading = false;
          if (response.code == 200) {
            // 使用数据转换工具处理整数转字符串
            this.statisticsData = convertObjectIntegersToStrings(response.data.list || []);
            this.total = response.data.total || 0;

            let num1 = 0
            let num2 = 0
            let num3 = 0
            let num4 = 0
            let num5 = 0
            let num6 = 0
            let num7 = 0
            let allNumberChu = 0
            this.statisticsData.forEach((item, index) => {
              num1 += Number(item.count1)
              num2 += Number(item.count2)
              num3 += Number(item.count3)
              num4 += Number(item.count4)
              num5 += Number(item.count5)
              num6 += Number(item.count6)
              num7 += Number(item.count7)
              allNumberChu += this.allNumber(item)
            })
            this.statisticsData.push({
              count1: num1,
              count2: num2,
              count3: num3,
              count4: num4,
              count5: num5,
              count6: num6,
              count7: num7,
              years: '合计'
            })
            this.itemKey = Math.random()
          } else {
            this.$message.error(response.message || '获取数据失败');
          }
        })
    },

    // 搜索
    handleSearch() {
      this.listQuery.page = 1;
      // 根据搜索条件更新数据
      if (this.listQuery.districtManagementUnit) {
        const unitMap = {
          "1": "朝阳区房屋管理中心",
          "2": "河东区房产服务中心",
          "3": "海淀区房屋管理中心",
          "4": "西城区房屋管理中心",
          "5": "东城区房屋管理中心"
        };
        this.currentUnit = unitMap[this.listQuery.districtManagementUnit] || "河东区房产服务中心";
      }


      this.currentTime = dayjs().format('YYYY-MM');

      this.getList();
      this.$message.success('查询完成');
    },

    // 重置表单
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.currentUnit = "河东区房产服务中心";
      this.currentTime = dayjs().format('YYYY-MM');
      this.getList();
    },

    // 导出功能
    handleExport() {
      let outList = []
      this.statisticsData.forEach((item, index) => {
        outList.push({
          项目: item.years,
          合计: this.allNumber(item),
          房屋结构加固: item.count1,
          屋面防水处理: item.count2,
          墙体裂缝修复: item.count3,
          地基沉降处理: item.count4,
          安全围栏设置: item.count5,
          临时支撑搭建: item.count6,
          其他: item.count7,
          备注: item.note


        })
      })

      // 获取表格数据
      const data = outList
      // 转换数据为工作表
      const worksheet = XLSX.utils.json_to_sheet(data)
      // 创建新的工作簿
      const workbook = XLSX.utils.book_new()
      // 将工作表添加到工作簿
      XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1')
      // 导出Excel文件
      XLSX.writeFile(workbook, '应急抢修统计表.xlsx')
    }
  }
};
</script>

<style scoped>
.statistics-container {
  margin-top: 20px;
}

.statistics-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 15px 20px;
  background-color: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 4px;
}

.statistics-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #333;
  text-align: center;
  flex: 1;
}

.statistics-info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
}

.unit-info,
.time-info {
  font-size: 14px;
  color: #666;
}

.statistics-table {
  width: 100%;
}

.statistics-table .el-table__header-wrapper {
  background-color: #f5f7fa;
}

.statistics-table .el-table__header th {
  background-color: #f5f7fa;
  color: #333;
  font-weight: 600;
  text-align: center;
  border-right: 1px solid #dfe6ec;
}

.statistics-table .el-table__body td {
  text-align: center;
  border-right: 1px solid #dfe6ec;
}

.unit-label {
  font-size: 12px;
  color: #909399;
  margin-top: 2px;
}

/* 三层表头样式 */
.header-row1 {
  height: 20px;
  line-height: 20px;
  font-weight: 600;
  border-bottom: 1px solid #dfe6ec;
}

.header-row2 {
  height: 25px;
  line-height: 25px;
  font-weight: 600;
  border-bottom: 1px solid #dfe6ec;
}

.header-row3 {
  height: 20px;
  line-height: 20px;
  font-size: 12px;
  color: #909399;
}

/* 表格行样式 */
.statistics-table ::v-deep .el-table__row:nth-child(1) {
  background-color: #f9f9f9;
}

.statistics-table ::v-deep .el-table__row:nth-child(2) {
  background-color: #ffffff;
}

.statistics-table ::v-deep .el-table__row:nth-child(3) {
  background-color: #f0f9ff;
  font-weight: 600;
}

/* 固定列样式 */
.statistics-table ::v-deep .el-table__fixed-column--left {
  background-color: #fafafa;
}

/* 表头样式优化 */
.statistics-table ::v-deep .el-table th {
  padding: 0;
  height: 65px;
  vertical-align: middle;
}

.statistics-table ::v-deep .el-table th .cell {
  padding: 0;
  line-height: 1;
}

.statistics-table ::v-deep .el-table td {
  padding: 10px 0;
}

/* 多级表头样式 */
.statistics-table ::v-deep .el-table__header th {
  height: 65px !important;
}

.statistics-table ::v-deep .el-table__header .has-gutter {
  height: 65px !important;
}
</style>